<template>
  <view>
    <!-- 使用自定义的搜索组件 -->
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>

    <view class="container">
      <!-- 轮播图区域  小圆点 自动轮播 轮播间隔 开始轮播到轮播结束总共耗时1S 衔接轮播-->
      <view class="big-img">
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"
          indicator-color="#fff">
          <swiper-item v-for="(item,i) in swiperList" :key="i">
            <!-- 点击页面跳转功能 -->
            <navigator class="swiper-item">
              <!-- 动态绑定图片的 src 属性 -->
              <image :src="item"></image>
            </navigator>

          </swiper-item>
        </swiper>
      </view>

      <!-- 分类导航区域 -->
      <view class="nav-list">
        <view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)" :data-index='item.id'
          :data-arr='navList'>
          <image :src="item.image_src" class="nav-img"></image>
          <view class='nav-name'>{{item.name}}</view>
        </view>
      </view>
      <!-- 导航栏结束 -->
    </view>

    <!-- 热点模块开始 -->
    <view class="news">
      <view class='header'>
        <view class="news-header">
          <text class="news-header-text">{{text}}</text>
          <view class='panel-list-item' @click='goLubo'>
            <text>更多</text>
            <uni-icons type="arrowright" size="16"></uni-icons>
          </view>
        </view>
      </view>


      <view class="panel-foot">

        <view class="foot-img">
          <image v-for="(item,i) in images" :key="i" :id="item.id" :src="item.coverPath" @load="onImageLoad"></image>
        </view>

        <view class="floor-item">
          <view class="floor-img-item">
            <block v-for="(item1,i1) in col1" :key="i1">
              <view class='img-item' @click='goVideo' :data-id='item1.id' :data-index="i1">
                <image class="img-item-img" :src="item1.coverPath" :style="{height:item1.height + 'px'} "></image>
                <text class="img-item-text" v-if="item1.isShow">{{item1.content}}</text>
                <view class='hotNews-num'>
                  <image class="bofangliang" src='/static/images/bofangliang.png'></image>
                  <text>{{item1.playedTime}}</text>
                </view>
                <view :class="{iconbofang:true,hide:true,show:item1.videoSeconds==10}">
                  <image class='iconImg' src='/static/home-icons/icon-bofang.png'></image>
                </view>
              </view>
            </block>
          </view>

          <!-- 右侧 -->
          <view class="floor-img-item">
            <block v-for="(item2,i2) in col2" :key="i2">
              <view class='img-item' @click='goVIdoe' :data-id='item2.id' :data-index="i2">
                <image class="img-item-img" :src="item2.coverPath" :style="{height:item2.height + 'px'} "></image>
                <text class="img-item-text" v-if="item2.isShow">{{item2.content}}</text>
                <view class='hotNews-num'>
                  <image class="bofangliang" src='/static/images/bofangliang.png'></image>
                  <text>{{item2.playedTime}}</text>
                </view>
                <view :class="{iconbofang:true,hide:true,show:item2.videoSeconds == 10}">
                  <image class='iconImg' src='/static/home-icons/icon-bofang.png'></image>
                </view>
              </view>
            </block>

          </view>
        </view>
        <!-- 结束 -->
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //这是轮播图的数据列表
        swiperList: [],

        // 1. 分类导航的数据列表
        navList: [{
            id: 0,
            image_src: '/static/home-icons/btn-lubo.png',
            name: '路播',
            navigator_url: '/subpkg/lubo/lubo'
          },
          {
            id: 1,
            image_src: '/static/home-icons/btn-zixun.png',
            name: '资讯',
            navigator_url: '/subpkg/zixun/zixun'
          },
          {
            id: 3,
            image_src: '/static/home-icons/btn-weizhang.png',
            name: '售后',
            navigator_url: '/subpkg/aftersale/aftersale'
          },
          {
            id: 3,
            image_src: '/static/home-icons/btn-weizhang.png',
            name: '违章查询',
            navigator_url: '/subpkg/query/query'
          },
          {
            id: 4,
            image_src: '/static/home-icons/btn-baoyang.png',
            name: '保养',
            navigator_url: '/subpkg/baoyang/baoyang'
          },
        ],
        video: [],
        userInfo: '',
        rootUrl: '',
        url: './lubo/video/video',
        scrollH: 0,
        imgWidth: 0,
        images: [],
        col1: [],
        col2: [],
        col1H: 0,
        col2H: 0,
        text: "推荐",
      };
    },
    onLoad() {
      let _this = this
      // this.getSwiperList()
      // 2. 在 onLoad 中调用获取数据的方法
      // this.getNavList()

      uni.getSystemInfo({
        success(res) {
          _this.imgWidth = res.windowWidth * 0.48
          _this.scrollH = res.windowHeight - 50
        }
      })

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      this.getSwiperList()

    },
    methods: {
      // 3. 获取轮播图数据的方法
      async getSwiperList() {
        this.images = []
        this.col1 = []
        this.col2 = []
        this.col1H = 0
        this.col2H = 0
        // 3.1 发起请求
        const {
          data: res
        } = await uni.$http.get('/sys/toIndex', {
          x: '',
          y: ''
        })
        console.log(res)
        // 3.2 请求失败
        if (res.status !== 200) {
          return uni.showToast({
            title: '数据请求失败！',
            duration: 1500,
            icon: 'none',
          })
        }
        // 3.3 请求成功，为 data 中的数据赋值
        this.swiperList = res.data.bannerList

        var images = this.images

        var src = res.data.hotestList
        for (var i in src) {
          if (src[i].content == '') {
            var isShow = false
          } else {
            var isShow = true
          }
          var img = {
            coverPath: src[i].coverPath,
            id: src[i].id,
            height: 0,
            playedTime: src[i].playedTime,
            content: src[i].content,
            videoSeconds: src[i].videoSeconds,
            isShow: isShow
          }
          images.push(img)
        }
        this.images = images
        this.loadingCount = images.length
      },

      // 3. 在 methods 中定义获取数据的方法
      async getNavList() {
        // const {
        //   data: res
        // } = await uni.$http.get('/api/public/v1/home/catitems')
        // if (res.meta.status !== 200) return uni.$showMsg()
        // this.navList = res.message
      },

      navClickHandler(item) {
        console.log("item",item.navigator_url)
          uni.navigateTo({
            url: item.navigator_url,
          })
        // if (item.name == '路播') {
        //   uni.navigateTo({
        //     url: '/subpkg/lubo/lubo'
        //   })
        // }
        // if (item.name == '资讯') {
        //   uni.navigateTo({
        //     url: '/subpkg/zixun/zixun'
        //   })
        // }
        // if (item.name == '违章查询') {
        //   uni.navigateTo({
        //     url: '/subpkg/query/query'
        //   })
        // }
        // if (item.name == '保养') {
        //   uni.navigateTo({
        //     url: '/subpkg/baoyang/baoyang'
        //   })
        // }
        // if (item.name == '售后') {
        //   uni.navigateTo({
        //     url: '/subpkg/aftersale/aftersale'
        //   })
        // }
      },

      //刷新
      onImageLoad(e) {
        let imageId = e.currentTarget.id;
        let oImgW = e.detail.width; //图片原始宽度
        let oImgH = e.detail.height; //图片原始高度
        let imgWidth = this.imgWidth; //图片设置的宽度
        //比例计算
        let scale = imgWidth / oImgW;
        let imgHeight = oImgH * scale; //自适应高度
        let images = this.images;
        let imageObj = null;
        for (let i = 0; i < images.length; i++) {
          let img = images[i];
          if (img.id == imageId) {
            imageObj = img;
            break;
          }
        }
        if (imgHeight == null) {
          imgHeight = 0
        }
        imageObj.height = imgHeight;
        let loadingCount = this.loadingCount - 1;
        let col1 = this.col1;
        let col2 = this.col2;
        let col1H = this.col1H;
        let col2H = this.col2H;
        //判断当前图片添加到左列还是右列
        if (col1H <= col2H) {
          col1H += imgHeight;
          col1.push(imageObj);
        } else {
          col2H += imgHeight;
          col2.push(imageObj);
        }
        this.loadingCount = loadingCount
        this.col1 = col1
        this.col2 = col2
        this.col1H = col1H
        this.col2H = col2H
        //当前这组图片已加载完毕，则清空图片临时加载区域的内容
        if (!loadingCount) {
          this.images = []
        }
      },

  
      goVideo(e) {
        var that = this
        var id = e.currentTarget.dataset.id
        var index = e.currentTarget.dataset.index
        var col1 = that.col1
        col1[index].playedTime = col1[index].playedTime + 1
        this.col1 = col1
        uni.navigateTo({
          url: '/subpkg/video/video?id' + id
        })
      },
      goVIdoe(e) {
        var that = this
        var id = e.currentTarget.dataset.id
        var index = e.currentTarget.dataset.index
        var col2 = that.col2
        col2[index].playedTime = col2[index].playedTime + 1
        this.col2 = col2
        wx.navigateTo({
          url: '/subpkg/video/video?id' + id
        })
      },
      goLubo() {
        wx.navigateTo({
          url: '/subpkg/lubo/lubo',
        })
      },

    }
  }
</script>

<style lang="scss">
  .container {
    background-color: #fff;
  }

  .big-img {
    background-color: #fff;
    padding: 0 33rpx 32rpx 33rpx;

    height: 303rpx;
    width: 683rpx;
    overflow: hidden;
    border-radius: 15rpx;
  }

  swiper {
    height: 330rpx;
    border-radius: 15rpx;
    overflow: hidden;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav-list {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
    text-align: center;
    background-color: white;

    .nav-item {
      .nav-img {
        width: 80rpx;
        height: 80rpx;

      }

      .nav-name {
        text-align: center;
        margin: 0 auto;
        margin-top: 21rpx;
        font-size: 14px;
        color: #333;
        letter-spacing: 5rpx;
      }
    }
  }

  .news {
    width: 100%;
    background-color: #fff;
    margin-top: 20rpx;

    .header {
      padding-top: 10rpx;

      .news-header {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        padding-left: 30rpx;
        border-left: 2px solid #008ce0;
        position: relative;
      }
    }

  }

  .news-header-text {
    font-weight: 700;
  }

  .panel-list-item {
    position: absolute;
    top: -10rpx;
    right: 30rpx;

    text {
      font-size: 12px;
      color: rgb(83, 82, 82);
      margin-right: 20rpx;
    }

    icon {
      font-size: 12px;
      color: rgb(83, 82, 82);
      display: inline;
    }
  }

  .panel-foot {
    .foot-img {
      display: none
    }

    .floor-img-item {
      width: 42.5%;
      margin-left: 5%;
      display: inline-block;
      vertical-align: top;

      .img-item {
        margin-bottom: 10%;
        position: relative;
        border-radius: 10rpx;
      }
    }

    .hotNews-num {
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      position: absolute;
      top: 0;
      left: 15rpx;

      .bofangliang {
        width: 44rpx;
        height: 31rpx;
        vertical-align: middle;
      }

      text {
        font-size: 11px;
        color: #fff;
        text-shadow: 0 2rpx 2rpx #000;
        margin-left: 3rpx;
      }
    }

    .iconbofang {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .iconImg {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }

  .img-item-img {
    width: 100%;
    vertical-align: middle;
    border-radius: 10rpx;
  }

  .img-item-text {
    display: block;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    border-radius: 0 0 10rpx 10rpx;
    bottom: 0;
    left: 0;
    padding-left: 5%;
    width: 95%;
    height: 60rpx;
    line-height: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
  }
</style>
